<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup name="Person">
import { ref, watch } from "vue";

let person = ref({
  name: "张三",
  age: 19,
});

function changeName() {
  person.value.name += "~";
}

function changeAge() {
  person.value.age += 1;
}

function changePerson() {
  person.value = { name: "李四", age: 25 };
}
//监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象地址，若想要监视对象内部属性的变化，需要手动开启深度监视
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true }
); //{deep: true} 深度监视，对象属性变化，也会监视到
// immediate: true 立即监视，一出现立刻执行，不论数据是否发生变化

/* newValue 与 oldValue:
   newValue 与 oldValue 不同值： 对象改变，是两个不同对象
   newValue 与 oldValue 同值： 对象不变，对象属性值改变
*/
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>